<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
let route = useRoute()
let goods = JSON.parse(route.query.data as any)
let radio1 = ref(false)
let remark = ref('')
import { sub_order } from '@/api/order'
const buy = () => {
  let data = {
    goods_id: goods.goods_id,
    goods_num: goods.goods_num,
    remark: remark.value
  }
  sub_order(data).then((res) => {
    console.log(res)
  })
}
</script>
<template>
  <div style="margin-bottom: 130px">
    <div style="width: 1200px; margin: 0 auto">
      <div class="shouhuo">
        收货信息
        <div>
          <el-icon color="#FFF" :size="20" class="no-inherit">
            <EditPen />
          </el-icon>
        </div>
      </div>
      <div class="shouhuo_content">
        <div>
          收件人：张三 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 电话：15588513282
        </div>
        <div>山东省临沂市罗庄区深莞城7单元607</div>
      </div>

      <div class="shouhuo">订单信息</div>
      <div class="goods_content">
        <div class="goods_title">
          <div class="good_name_title">商品信息</div>
          <div class="good_num_title">数量</div>
          <div class="good_price_title">单价</div>
          <div class="good_freight_title">运费</div>
          <div class="good_total_title">金额</div>
        </div>
        <div class="goods_item">
          <div class="goods_item_left">
            <img :src="goods.goods_img.split(',').shift()" alt="" />
            {{ goods.goods_name }}
          </div>
          <div class="good_total_title">
            {{ goods.goods_num }}
          </div>
          <div class="good_total_title">
            {{ goods.goods_price }}
          </div>
          <div class="good_total_title">
            {{ goods.goods_name }}
          </div>
          <div class="good_total_title">
            {{ goods.goods_total }}
          </div>
        </div>

        <div class="order_bottom">
          <div style="display: flex; align-items: center">
            留言：
            <input
              type="text"
              style="height: 30px; width: 500px; outline: none; padding-left: 20px"
              v-model="remark"
            />
          </div>
          <div>
            订单总计 ：
            <span style="font-size: 16px; color: #ff0000">{{ goods.goods_total }}</span> 元
          </div>
        </div>
      </div>

      <div class="shouhuo" style="margin-top: 60px">
        发票信息
        <div>
          <el-icon color="#FFF" :size="20" class="no-inherit">
            <EditPen />
          </el-icon>
        </div>
      </div>
      <div class="shouhuo_content flex">
        是否开发票：
        <el-radio-group v-model="radio1" class="ml-4">
          <el-radio :value="false" size="large">否</el-radio>
          <el-radio :value="true" size="large">是</el-radio>
        </el-radio-group>
      </div>

      <div class="buy_bottom">
        <el-button class="btn_custom" type="primary" @click="buy">立即下单</el-button>
        <div style="padding-right: 20px">
          商品总金额（含运费）： <span style="color: #ff0000">￥{{ goods.goods_total }}</span> 元
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.buy_bottom {
  margin-top: 70px;
  height: 70px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  box-shadow: -2px -2px 10px #aaa;
  font-size: 14px;
  .btn_custom {
    height: 100%;
    width: 150px;
    text-align: center;
    border-radius: 0;
    font-size: 18px;
  }
}
.flex {
  display: flex;
  align-items: center;
}
.order_bottom {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
}
.goods_item {
  display: flex;
  align-items: center;
  border-bottom: 1px #eee solid;
}
.good_total_title {
  width: 10%;
  text-align: center;
}
.goods_item_left {
  padding: 10px;
  width: calc(60% - 20px);
  display: flex;
  align-items: center;
  img {
    height: 90px;
    width: 90px;
    border: 1px #eee solid;
    margin-right: 20px;
  }
}
.goods_content {
  border: 1px #eee solid;
  .goods_title {
    padding: 10px;
    border-bottom: 1px #eee solid;
    display: flex;
    align-items: center;
    .good_name_title {
      width: 60%;
      text-align: left;
    }
    .good_num_title {
      width: 10%;
      text-align: center;
    }
    .good_price_title {
      width: 10%;
      text-align: center;
    }
    .good_freight_title {
      width: 10%;
      text-align: center;
    }
    .good_total_title {
      width: 10%;
      text-align: center;
    }
  }
}
.bofy {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 70px;
}
.shouhuo {
  height: 50px;
  width: calc(100% - 30px);
  display: flex;
  align-items: center;
  padding-left: 30px;
  font-size: 16px;
  background-color: #eeeeee;
  div {
    margin-left: 20px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: #3497e5;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.shouhuo_content {
  padding: 20px 0 20px 50px;
  font-size: 14px;
  color: #666;
  text-align: left;
}
</style>
